<!--
 * @Author: 星巴克臻选
 * @Date: 2021-08-10 15:53:36
 * @LastEditTime: 2021-08-17 14:33:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \git测试文件夹\HTML&CSS\starbucks-reserve.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星巴克臻选</title>
    <link rel="stylesheet" href="css/1-feame.css">
    <link rel="stylesheet" href="css/starbucks-reserve.css">
    <link rel="stylesheet" href="css/commom.css">
</head>
<body>
    <div class="body-h">
        <div class='container'> <!--页面左边-->
            <!-- 左边顶部 -->
            <header class='header'>
                <a class='logo' href='/'>
                <img src='https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg' alt='星巴克'/>
                </a>
                <div class='primary'>
                    <ul>
                        <li class='stores'>
                            <a class="store-s" href='#'>门店</a>
                        </li>
                        <li class='account'>
                            <a class="account-c" href='account.html'> 我的帐户</a>
                        </li>
                        <li class='menu'>
                            <a class="menu-m"  href='menu.html'>菜单</a>
                        </li>
                    </ul>
                </div>
                <a class='trigger' rel='nav-overlay'>
                    <button>
                        <img src='https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-hamburger.svg'/>
                    </button> 
                </a> 
            </header>
            <!-- 左边下底部-->
            <div class="container-m">
                <div class="title">关于星巴克臻选<sup>TM</sup></div>
            </div>
        </div> 
        <div class="nav">
            <header class='header1'>
                <a class='logo' href='starbucks.html'>
                <img src='https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg' alt='星巴克'/>
                </a>
                <a class='trigger1' rel='nav-overlay'> 
                    <button>
                        <img src='https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-close.svg'/>
                    </button>
                </a> 
            </header1>
            <div class="container-m1">
                <div class="container-bottom1">
                    <ul class="list">
                        <li> <a href="#">门店</a></li>
                        <li> <a href="#">星享俱乐部</a></li>
                        <li> <a href="menu.html">菜单</a></li>
                        <li> <a href="starbucks-app.html">星巴克移动应用</a></li>
                        <li> <a href="#">星礼卡</a></li>
                        <li> <a href="starbucks-reserve.html">星巴克臻选<sup>TM</sup></a></li>
                        <li> <a href="starbucks-now.html">咖快<sup>TM</sup>&nbsp;-&nbsp;在线点 到店取</a></li>
                        <li> <a href="starbucks-delivers-info.html">专星送<sup>TM</sup></a></li>
                        <li> <a href="coffee-blog.html">咖啡星讲堂</a></li>
                        <li> <a href="#">上海烘焙坊</a></li>
                        <li> <a href="about.html">关于星巴克</a></li>
                        <li> <a href="help.html">帮助中心</a></li>
                    </ul>
                </div>
            </div>
        </div>
    <script>
        document.getElementsByTagName("button")[0].onclick=function(){document.getElementsByClassName("nav")[0].style.display="block",document.getElementsByClassName("container")[0].style.display="none";}
        document.getElementsByTagName("button")[1].onclick=function(){document.getElementsByClassName("nav")[0].style.display="none",document.getElementsByClassName("container")[0].style.display="block";}
    </script>
        <!-- 页面右边 -->
        <div class="main">
            <div class="tu1">
                <div>
                    <div>代表我们更高品质的星巴克臻选<sup>TM</sup>咖啡
                </div> 
            </div>
            </div>
            <div class="tu2">
                <div>
                我们走访世界各地搜罗品质出众的咖啡豆，当中只有少量珍贵而独特风味的 品种，才会被冠以星巴克臻选™的称号。 它们不可多得，且拥有让人着迷的风味。 这些臻选™咖啡豆只在指定星巴克门店限量供应。
                </div>
                <button>查看星巴克臻选<sup>TM</sup>咖啡门店</button>
            </div>
            <div class="tu3">
                <div class="head">
                    <div class="c1" id="x1">限量供应</div>
                    <div class="c1" id="x2">最新星巴克臻选<sup>TM</sup>咖啡</div>
                    <div class="yuan">
                        <div>
                            <img src="img/starbucks-reserve_imgs/china-yunnan-puer-baoshan.png">
                            <br>
                            中国云南普洱保山综合咖啡豆
                        </div>
                        <div>
                            <img src="img/starbucks-reserve_imgs/china-qingkai-farm.png" >
                            <br>
                            中国云南晴开农场咖啡豆
                        </div>
                        <div>
                            <img src="img/starbucks-reserve_imgs/ethiopia-bitta-farm.png" >
                            <br>
                            埃塞俄比亚比塔庄园咖啡豆
                        </div>
                    </div>
                </div>
                <div class="body1"></div>
                <div class="body2">
                    <div class="c3">什么是星巴克臻选™咖啡</div>
                    <div class="z1">
                        <img src="img/starbucks-reserve_imgs/article-1.jpg" >
                        每年，我们的伙伴环游世界，只为找到上乘的咖啡。每隔一段时间，我们都会找到一款珍贵而独特的咖啡豆，并且迫不及待地想将他们带回来和大家分享。我们在支持中心的采购部门以及农业学家们一直致力于帮助全世界的咖啡种植者们，通过与他们合作，我们希望获得发现不同寻常并且独特的咖啡种类的机会。而在我们的品鉴部门，我们的专业品鉴师每年会品尝超过25万杯咖啡，然后再从中选取稀有而独特的几个种类来制作星巴克臻选™咖啡。
                    </div>
                    <div class="z2">
                        <img src="img/starbucks-reserve_imgs/article-2.jpg" >
                        <p>风土条件</p>
                        咖啡的生长，就如同酿酒的葡萄，受到不同产区的具体生长环境的影响，形成了大部分的风味。咖啡生长地区的土地，气温，海拔，降雨量和阳光等众多可变因素赋予了咖啡一系列特殊的个性，呈现出一杯美味的咖啡。
                    </div>
                    <div class="z3">
                        <p>加工方法</p>
                        每一颗咖啡豆的生命都始于一颗咖啡浆果的种子。这颗咖啡果实如何被从咖啡豆中取出 – 也就是我们说的咖啡豆的加工 – 对于咖啡的风味有着直接的，甚至是巨大的影响。咖啡在烘焙前的收获，碾磨，水洗或者自然加工，甚至陈年豆的处理都可以成就一杯口味令人惊叹的咖啡。
                    </div>
                    <div class="z4">
                        <img src="img/starbucks-reserve_imgs/article-3.png" >
                        <p>咖啡品种</p>
                        咖啡品种有着悠久的历史，可以创造出一杯珍贵稀有的咖啡。最常见的四种阿拉比卡咖啡的变种为波旁，铁毕卡，卡杜拉和卡杜艾。波旁和铁毕卡是原生种咖啡豆，是所有咖啡树的原型。卡杜拉和卡杜艾是波旁混合种的后代，混合了（通过自然混合或人工方法）两种现有咖啡的变种后得到，创造出一杯崭新的咖啡。
                    </div>
                    <div class="z5">
                        <img src="img/starbucks-reserve_imgs/article-4.jpg" >
                        <p>人文故事</p>
                        每一款星巴克臻选™咖啡的背后都讲述了一个关于家庭，种植农和社区的故事。这些人文故事带给我们的是星巴克臻选™体验中不可或缺的一部分。
                    </div>
                </div>
                <div class="foot">
                    <img src="img/starbucks-reserve_imgs/reserve-logo.png">
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>